<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios基本使用</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
  </head>
  <body>
    <button>点击发送 GET 请求</button>
    <button>点击发送 GET 请求2</button>
    <button>点击发送 POST 请求</button>
    <button>点击发送 PUT 请求</button>
    <button>点击发送 PATCH 请求</button>
    <button>点击发送 DELETE 请求</button>
  


  <script>

 
    const buttons = document.querySelectorAll('button')



    //get请求
    buttons[0].onclick = async ()=>{
      try {
        const response = await axios({
        method:'get',
        url:'http://localhost:3000/movie',
        params:{
          id:2,
          name :'大话西游'
        }
      })
      console.log(response.data)
      
    } catch (error) {
      console.log(error)
      alert(error.message)
    }
  }


  buttons[1].onclick = async()=>{
    try{
      const response = await axios('http://localhost:3000/movie?id=2&name=大话西游2')
      console.log(response.data)
    }catch(error){
      console.log(error)
      alert(error.message)
    }
  }

// 添加,post请求
  buttons[2].onclick = async () =>{
    const response =await axios({
      method:'post',
      url:' http://localhost:3000/movie',
      data: 'name=野外生存记&director=贝爷'
    })
    console.log(response.data)
  }




  </script>
  </body>
</html>
